<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>
		<meta charset="utf-8">
		<title>收货地址</title>
		<script type="text/javascript" src="../dt/js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="../dt/js/jquery.citys.js"></script>
		<link href="../dt/css/font-awesome.min.css" rel="stylesheet">
		<link href="../dt/css/bootstrap.min.css" rel="stylesheet">
		<link href="../dt/css/templatemo-style.css" rel="stylesheet">
		<link href="../dt/css/common.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
			.Navigation_name > #jie{
		margin-top:20px;
	}
			.citys {
				margin-bottom: 10px;
				margin:10px 0px 0px 20px;
			}
			#citt{
				font-family: "微软雅黑";
				font-size:15px;
				font-weight:bolder;
				color: #3E8F3E;
				margin-left:20px ;
			}
			.cityss {
				margin-bottom: 10px;
				margin:10px 0px 0px 130px;
				line-height: inherit;
			}
			.citys p {
				line-height: 30px;
			}
			
			.warning {
				color: #c00;
			}
			
			.main a {
				margin-right: 8px;
				color: #369;
			}
			#demo3{
				height: 40px;
				width: 240px;
				
			}
			#slogan {
				position: relative;
				top: 0px;
				left: 45px;
				height: 80px;
				width: 1000px;
				margin: auto;
			}
			
			#slogan_one {
				font-size: 25px;
				margin-left: 70px;
			}
			
			#slogan_two {
				font-weight: bolder;
				font-size: 28px;
				color: red;
			}
			
			textarea{
				border: 1px solid #90b830;
			}
			.table-responsive{
				padding-bottom: 30px;
			}
		</style>

	</head>

	<body>
		<div class="templatemo-content col-1 light-gray-bg" style="height:100%;">
			<div id="top">
				<div class="Inside_pages">
					<div class="hd_top_manu clearfix">
						<ul class="clearfix">
							<li class="hd_menu_tit" data-addclass="hd_menu_hover">
								<a href="/dt/que.do">五谷香首页</a>
							</li>
						
							<c:if test="${name != null || name != ''}">
								<li class="hd_menu_tit" data-addclass="hd_menu_hover">${name}</li>
								<li class="hd_menu_tit" data-addclass="hd_menu_hover">
									<a href="/dt/logout.do">退出</a>
								</li>
							</c:if>
						</ul>
					</div>
				</div>
			</div>
			<div class="Navigation" id="Navigation" style="height:80px">
				<ul class="Navigation_name">
					<li><img alt="" src="../dt/img/logo.jpg" style="width:100px;height:80px"></li>
					<li id="jie">
						<a href="/dt/index.do" class="active"><i class="fa fa-home fa-fw"></i>我的首页</a>
					</li>
					<li id="jie">
						<a href="/dt/setUser.htm"><i class="fa fa-bar-chart fa-fw"></i>修改信息</a>
					</li>
					<li id="jie">
						<a href="/dt/queryStateOrder.do?orderState=已支付"><i class="fa fa-database fa-fw"></i>订单中心</a>
					</li>
					<li id="jie">
						<a href="/dt/queryTrade.do"><i class="fa fa-map-marker fa-fw"></i>交易记录</a>
					</li>
					<li id="jie">
						<a href="/dt/shopping.do"><i class="fa fa-map-marker fa-fw"></i>我的购物车</a>
					</li>
					<li id="jie">
						<a href="/dt/addressMessage.do"><i class="fa fa-map-marker fa-fw"></i>地址管理</a>
					</li>
				</ul>
			</div>
			<div class="templatemo-content-container">
				<div class="templatemo-content-widget white-bg">
					<div class="panel panel-default no-border">
						<div class="panel-heading templatemo-position-relative">
							<h2 class="text-uppercase">填写收货地址</h2>
						</div>
						<form action="/dt/setAddress.do" method="post">
							<div class="table-responsive" style="margin-top: 10px;">
								<span id="citt">请输入收货地址:</span>
								<span id="demo3" class="citys">
									
										<select name="province"></select>
										<select name="city"></select>
										<select name="area"></select>
										<select name="town"></select>
									
								</span>
							</div>
							<div class="table-responsive" >
								<p id="citt">请输入详细地址：</p>
								<textarea class="cityss" name="newDetailedAddress" rows="" cols="" value="${address.detailedAddress}" placeholder="建议你如实填写详细收货地址，列入街道名称，门牌号码，楼层和房间号码" style="width: 600px;height: 100px;"></textarea>
							</div>
							<div class="table-responsive">
								<span id="citt">收货人的姓名：</span>
								<input type="text" name="newNickName" id="demo3" value="${address.nickName}" placeholder="请输入收货人的姓名" style="margin-left:20px;display: inline;"class="form-control"/>
							</div>
							<div class="table-responsive">
								<span id="citt">收货电话：</span>
								<input type="text" name="newUserPhone" id="demo3" value="${address.userPhone}" placeholder="手机号/电话号码" style="margin-left:48px ;display: inline;"class="form-control"/>
							</div>
							<div  align="center">
								<input type="hidden" name="id" value="${address.id}" />
								<input type="submit"value="修改"class="btn btn-primary btn-lg active"/>
							</div>
						</form>
					</div>
							<table
							class="table table-striped table-bordered templatemo-user-table">
							<thead>
								<tr>
								
									<td><a href="" class="white-text templatemo-sort-by">收货人
											<span class="caret"></span>
									</a></td>
									<td><a href="" class="white-text templatemo-sort-by">所在地区
											<span class="caret"></span>
									</a></td>
									<td><a href="" class="white-text templatemo-sort-by">收货电话
											<span class="caret"></span>
									</a></td>
								
									<td><a href="" class="white-text templatemo-sort-by">详细地址<span
											class="caret"></span></a></td>
									<td>操作</td>
									<td>操作</td>
								</tr>
							</thead>
							
							<tbody>		
							<c:forEach items="${queryList}" var="query">
									<tr>
										<td>${query.nickName}</td>
										<td>${query.address}</td>
										<td>${query.userPhone}</td>	
										<td>${query.detailedAddress}</td>
										<td>									
											<a href="/dt/set.do?id=${query.id}">修改</a>
										</td>
										<td>
											<a href="/dt/removeAddress.do?id=${query.id}">删除</a>
										</td>	
									</tr>		
								</c:forEach>
							</tbody>
						
						</table>
				</div>
			</div>
			<div id="slogan">
				<span id="slogan_one"><b id="slogan_two">优</b> 品种优良</span>
				<span id="slogan_one"><b  id="slogan_two">绿</b> 绿色健康</span>
				<span id="slogan_one"><b  id="slogan_two">精</b> 米中精品</span>
				<span id="slogan_one"><b  id="slogan_two">香</b> 优选五谷香</span>
			</div>
		</div>

		<script type="text/javascript">
			$('#demo2').citys({
				required: false,
				nodata: 'disabled',
				onChange: function(data) {
					var text = data['direct'] ? '(直辖市)' : '';
					$('#place').text('当前选中地区：' + data['province'] + text + ' ' + data['city'] + ' ' + data['area']);
				}
			});
			var $town = $('#demo3 select[name="town"]');
			var townFormat = function(info) {
				$town.hide().empty();
				if(info['code'] % 1e4 && info['code'] < 7e5) { //是否为“区”且不是港澳台地区
					$.ajax({
						url: 'http://passer-by.com/data_location/town/' + info['code'] + '.json',
						dataType: 'json',
						success: function(town) {
							$town.show();
							for(i in town) {
								$town.append('<option value="' + town[i] + '">' + town[i] + '</option>');
							}
						}
					});
				}
			};
			$('#demo3').citys({
				province: '广东',
				city: '深圳',
				area: '宝安',
				onChange: function(info) {
					townFormat(info);
				}
			}, function(api) {
				var info = api.getInfo();
				townFormat(info);
			});
					$("#Navigation").slide({
					titCell: ".Navigation_name li",
					trigger: "click"
				});
		</script>
	</body>

</html>